<template>
  <div class="api-test">
    <h2>API 连接测试</h2>
    
    <div class="test-section">
      <h3>品牌 API 测试</h3>
      <button @click="testBrandsApi" class="test-btn">测试品牌API</button>
      <div class="result">
        <strong>状态:</strong> {{ brandsStatus }}<br>
        <strong>数据:</strong> {{ brands.length }} 条记录
        <pre v-if="brands.length > 0">{{ JSON.stringify(brands.slice(0, 3), null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>分类 API 测试</h3>
      <button @click="testTypesApi" class="test-btn">测试分类API</button>
      <div class="result">
        <strong>状态:</strong> {{ typesStatus }}<br>
        <strong>数据:</strong> {{ types.length }} 条记录
        <pre v-if="types.length > 0">{{ JSON.stringify(types.slice(0, 3), null, 2) }}</pre>
      </div>
    </div>

    <div class="test-section">
      <h3>颜色 API 测试</h3>
      <button @click="testColorsApi" class="test-btn">测试颜色API</button>
      <div class="result">
        <strong>状态:</strong> {{ colorsStatus }}<br>
        <strong>数据:</strong> {{ colors.length }} 条记录
        <pre v-if="colors.length > 0">{{ JSON.stringify(colors.slice(0, 3), null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ApiTest',
  data() {
    return {
      brands: [],
      types: [],
      colors: [],
      brandsStatus: '未测试',
      typesStatus: '未测试',
      colorsStatus: '未测试'
    }
  },
  methods: {
    async testBrandsApi() {
      try {
        this.brandsStatus = '测试中...'
        const response = await axios.get('/api/brands')
        console.log('品牌API响应:', response)
        
        if (response.data && response.data.code === 200) {
          this.brands = response.data.data || []
          this.brandsStatus = '成功 ✅'
        } else {
          this.brands = response.data || []
          this.brandsStatus = '成功 ✅ (直接数据)'
        }
      } catch (error) {
        console.error('品牌API错误:', error)
        this.brandsStatus = `失败 ❌: ${error.message}`
        this.brands = []
      }
    },

    async testTypesApi() {
      try {
        this.typesStatus = '测试中...'
        const response = await axios.get('/api/types')
        console.log('分类API响应:', response)
        
        if (response.data && response.data.code === 200) {
          this.types = response.data.data || []
          this.typesStatus = '成功 ✅'
        } else {
          this.types = response.data || []
          this.typesStatus = '成功 ✅ (直接数据)'
        }
      } catch (error) {
        console.error('分类API错误:', error)
        this.typesStatus = `失败 ❌: ${error.message}`
        this.types = []
      }
    },

    async testColorsApi() {
      try {
        this.colorsStatus = '测试中...'
        const response = await axios.get('/api/colors')
        console.log('颜色API响应:', response)
        
        if (response.data && response.data.code === 200) {
          this.colors = response.data.data || []
          this.colorsStatus = '成功 ✅'
        } else {
          this.colors = response.data || []
          this.colorsStatus = '成功 ✅ (直接数据)'
        }
      } catch (error) {
        console.error('颜色API错误:', error)
        this.colorsStatus = `失败 ❌: ${error.message}`
        this.colors = []
      }
    }
  },
  async mounted() {
    // 自动测试所有API
    await this.testBrandsApi()
    await this.testTypesApi()
    await this.testColorsApi()
  }
}
</script>

<style scoped>
.api-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.test-btn {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 15px;
}

.test-btn:hover {
  background: #0056b3;
}

.result {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  font-family: monospace;
}

pre {
  background: #e9ecef;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  margin-top: 10px;
}
</style>